<template>
  <view class="content" v-if="data">
    <view class="user-info">
      <view class="avatar" @click="showAvatar">
        <image v-if="data.avatar" :src="data.avatar" />
        <image v-else-if="data.sex < 0 || data.sex == 1" src="@/static/image/man.png" />
        <image v-else src="@/static/image/woman.png" />
      </view>
      <text
        v-if="data.sex > -1"
        :class="['iconfont', data.sex ? 'icon-nan' : 'icon-nv', 'gender']"
        :style="{ background: data.sex ? '#1DA1F3' : '#F86098' }"
      />
      <view class="msg">
        <view class="msg-item">
          <text class="name">{{ data.name || "" }}</text>
          <text v-if="data.occupationStartYear">从业{{ $util.getAgeBirth(data.occupationStartYear) }}年</text>
        </view>
        <view class="msg-item">
          <text>{{ data.postName || "" }}</text
          >{{ data.departmentName || "" }}</view
        >
        <view class="msg-item"> {{ data.hospitalName || "" }}</view>
      </view>
      <view class="btn">
        <tui-button type="blue" width="140rpx" height="40rpx" @click="call"><view style="font-size:28rpx;line-height: 40rpx;">拨打电话</view></tui-button>
      </view>
    </view>

    <view class="labels">
      <view class="item" v-for="(item, index) in labels" :key="index">
        <view>
          {{ item.label }}:<text>{{ item.value }} </text></view
        >
      </view>
    </view>
    <view class="introduces">
      <view class="item" v-for="(item, index) in introduces" :key="index" @click="goEvaluate(index)">
        <view class="label">
          {{ item.label }}<text v-if="index == 3" class="go-evaluate">去评分<text class="iconfont icon-right" /></text
        ></view>
        <view class="value" v-if="index < 3" :class="[item.value ? '' : 'null']"> {{ item.value || "暂无信息" }}</view>
        <view v-else class="evaluates">
          <view v-for="(item, ind) in evaluates" :key="ind" class="evaluates-item">
            <view class="evaluates-item-label">{{ item.label }}</view>
            <view
              ><text>{{ item.value }}</text
              >{{ item.unit }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <view style="height: 100rpx" />
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      data: null,
      evaluate: {},
      labels: [
        { label: "患者数", value: "-" },
        { label: "互动量", value: "-" },
        { label: "患者评分", value: "-" },
      ],
      introduces: [
        { label: "擅长病种", value: "" },
        { label: "专业特长", value: "" },
        { label: "简介", value: "" },
        { label: "评分", value: "" },
      ],
      evaluates: [
        { label: "总次数", value: "-", unit: "次" },
        { label: "平均分", value: "-", unit: "分" },
        { label: "好评数", value: "-", unit: "次" },
      ],
    };
  },
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  onLoad() {
    this.doctorDetail();
  },
  methods: {
    //医生信息
    doctorDetail() {
      this.$api.doctorDetail().then((res) => {
        if (res.code == 200) {
          this.data = res.data;
          this.doctorCuntEvaluate(res.data.doctorId);
          this.introduces[0].value = res.data.goodAtDisease;
          this.introduces[1].value = res.data.specialty;
          this.introduces[2].value = res.data.introduction;
        }
      });
    },
    //患者评价
    doctorCuntEvaluate(doctorId) {
      this.$api.doctorCuntEvaluate({ doctorId }).then((res) => {
        if (res.code == 200) {
          this.evaluate = res.data;
          this.labels[0].value = res.data.patientNum;
          this.labels[1].value = res.data.interactNum;
          this.labels[2].value = res.data.totalAvgScore;
          this.evaluates[0].value = res.data.totalNum;
          this.evaluates[1].value = res.data.totalAvgScore;
          this.evaluates[2].value = res.data.goodNum;
        }
      });
    },
    goEvaluate(index) {
      if (index == 3) {
        this.$util.goUrl("/pagesPatient/evaluateList/index?doctorId=" + this.data.doctorId);
      }
    },
    call() {
      if (this.data.phone) {
        uni.makePhoneCall({
          phoneNumber: this.data.phone,
        });
      }
    },

    showAvatar() {
      if (this.data.avatar) {
        uni.previewImage({
          current: 0,
          urls: [this.data.avatar],
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  background: $back-grey-color;
  min-height: 100vh;
  .user-info {
    background: $theme-color;
    display: flex;
    padding: 0 60rpx 40rpx 60rpx;
    align-items: center;
    position: relative;
    .avatar {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      border-radius: 140rpx;
      overflow: hidden;
      margin-top: 6rpx;
      box-shadow: rgba(14, 14, 14, 0.5) 0px 6rpx 15rpx 0px;
      border: 1rpx solid rgba(255, 255, 255, 0.7);
      padding: 4rpx;
      .icon-touxiang {
        width: 100%;
        height: 100%;
        line-height: 100%;
        font-size: 160rpx;
        color: rgba(255, 255, 255, 0.7);
      }
      image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .gender {
      z-index: 100;
      font-size: 30rpx;
      margin: 100rpx 0 0 -60rpx;
      z-index: 100;
      background: blue;
      color: #fff;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      width: 40rpx;
      border-radius: 40rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.8);
    }
    .msg {
      color: #fff;
      margin-left: 40rpx;
      &-item {
        text:first-child {
          font-size: $big-font-size;
          margin-right: 40rpx;
        }
      }
    }
    .btn {
      position: absolute;
      bottom: 0rpx;
      right: 20rpx;
    }
  }
  .labels {
    display: flex;
    padding: 20rpx 0;
    border-top: 1rpx solid $default-border-color;
    background: #fff;
    .item {
      width: 33.33vw;
      text-align: center;
      color: $font-grey-color;
      text {
        color: #e0b468;
      }
    }
  }
  .introduces {
    .item {
      margin-top: 20rpx;
      background: #fff;
      padding-left: 40rpx;
      .label {
        font-weight: bold;
        line-height: 100rpx;
        border-bottom: 1rpx solid $default-border-color;
        display: flex;
        justify-content: space-between;
        padding-right: 20rpx;
        .go-evaluate {
          font-weight: normal;
          color: $font-grey-color;
        }
      }
      .value {
        padding: 30rpx 40rpx 30rpx 0;
      }
      .null {
        color: $font-grey-color;
      }
      .evaluates {
        padding: 30rpx 40rpx 30rpx 0;
        display: flex;
        &-item {
          width: 33.33%;
          text-align: center;
          font-size: $small-font-size;
          color: $font-grey-color;
          &-label {
            margin-bottom: 20rpx;
          }
          text:first-child {
            font-size: $huge-font-size;
            color: $default-color;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
